<template>
  <div class="news-page">
    <div class="page-header">
      <h1>新闻资讯</h1>
      <p>最新资讯，实时更新</p>
    </div>
    
    <div class="news-container">
      <div class="news-filters">
        <el-select v-model="selectedCategory" placeholder="选择分类" @change="filterNews">
          <el-option label="全部" value=""></el-option>
          <el-option label="科技" value="tech"></el-option>
          <el-option label="财经" value="finance"></el-option>
          <el-option label="体育" value="sports"></el-option>
          <el-option label="娱乐" value="entertainment"></el-option>
        </el-select>
        
        <el-input
          v-model="searchKeyword"
          placeholder="搜索新闻..."
          prefix-icon="el-icon-search"
          @input="filterNews"
          style="width: 300px; margin-left: 16px;"
        />
      </div>
      
      <div class="news-list">
        <el-card
          v-for="news in newsList"
          :key="news.id"
          class="news-card"
          @click="goToDetail(news.id)"
        >
          <div class="news-content">
            <div class="news-image">
              <img :src="news.image" :alt="news.title" />
            </div>
            <div class="news-info">
              <h3 class="news-title">{{ news.title }}</h3>
              <p class="news-summary">{{ news.summary }}</p>
              <div class="news-meta">
                <span class="news-category">{{ getCategoryName(news.category) }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      
      <div class="pagination-container">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="totalNews"
          layout="total, prev, pager, next, jumper"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useAsyncData } from '#app'
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const selectedCategory = ref('')
const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

// 服务端获取新闻数据
const fetchNews = () =>
  $fetch('http://localhost:3002/api/news', {
    params: {
      category: selectedCategory.value,
      keyword: searchKeyword.value,
      page: currentPage.value,
      pageSize: pageSize.value
    }
  })

const { data: newsData, refresh } = await useAsyncData('news', fetchNews)

const newsList = computed(() => newsData.value?.data?.list || [])
const totalNews = computed(() => newsData.value?.data?.total || 0)

const getCategoryName = (category) => {
  const categoryMap = {
    tech: '科技',
    finance: '财经',
    sports: '体育',
    entertainment: '娱乐'
  }
  return categoryMap[category] || '其他'
}

const filterNews = () => {
  currentPage.value = 1
  refresh()
}

const handlePageChange = (page) => {
  currentPage.value = page
  refresh()
}

const goToDetail = (newsId) => {
  router.push(`/news/${newsId}`)
}

// 监听筛选条件变化自动刷新（可选）
watch([selectedCategory, searchKeyword], () => {
  filterNews()
})
</script>

<style scoped>
.news-page {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 32px;
}

.page-header h1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 8px;
}

.page-header p {
  font-size: 16px;
  color: #666;
}

.news-container {
  max-width: 1200px;
  margin: 0 auto;
}

.news-filters {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.news-list {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}

.news-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.news-content {
  display: flex;
  gap: 16px;
}

.news-image {
  flex-shrink: 0;
  width: 200px;
  height: 120px;
  overflow: hidden;
  border-radius: 8px;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.news-summary {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #999;
}

.news-category {
  background: #e6f7ff;
  color: #1890ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.pagination-container {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

@media (max-width: 768px) {
  .news-content {
    flex-direction: column;
  }
  
  .news-image {
    width: 100%;
    height: 200px;
  }
  
  .news-filters {
    flex-direction: column;
    gap: 16px;
  }
  
  .news-filters .el-input {
    margin-left: 0 !important;
    width: 100% !important;
  }
}
</style> 